<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			#menu{
				width:370px;
				border:1px solid;
				margin: 15px auto;
			}
			#menu.on{
				position:fixed;
				top:0%;
				left:50%;
				transform: translateX(-50%);
			}
			#menu ul {
				height: 30px;
				text-align: center;
			}
			#menu ul li {
				position:relative;
				width:30px;
				height:30px;
				list-style:none;
				text-align:center;
				line-height:30px;
				font-size:12px;
				cursor:pointer;
				float: left;
			}
			#menu ul li.last {
				background:#ccc;
				color:black;
				border-bottom:none;
			}
			#menu ul li span {
				display:none;
				width:30px;
				height:30px;
				position:absolute;
				top:0;
				left:0;
				color:red;
			}
			#menu ul li:hover span {
				display:block;
				background:darkred;
				color:white;
			}
			#menu ul li span.active {
				display:block;
				background:darkred;
				color:white;
			}
			#menu ul li:hover span.active {
				display:block;
				background:darkred;
				color:white;
			}
			#header,#main,#footer {
				margin:auto;
				width:1000px;
				text-align:center;
				font-size:40px;
				font-weight:bold;
				line-height:500px;
			}
			#main div {
				height:700px;
				font-size:50px;
				color:honeydew;
				line-height:700px;
			}
			#header {
				height:500px;
				background:#ccc;
			}
			#footer {
				height:500px;
				background:#ccc;
			}
		</style>
	</head>
	<body>
		<!--楼层内容开始-->
		<div id="header">头部</div>
		
		<div id="menu">
		    <ul>
		        <li>1F <span>服饰</span> </li>
		        <li>2F <span>美妆</span> </li>
		        <li>3F <span>手机</span> </li>
		        <li>4F <span>家电</span> </li>
		        <li>5F <span>数码</span> </li>
		        <li>6F <span>运动</span> </li>
		        <li>7F <span>居家</span> </li>
		        <li>8F <span>母婴</span> </li>
		        <li>9F <span>食品</span> </li>
		        <li>10F <span>图书</span> </li>
		        <li>11F <span>服务</span> </li>
		        <li class="last">Top</li>
		    </ul>
		</div>
		
		<div id="main">
		    <div class="Louti" style="background: #FF0000;height: 50px;">服饰</div>
		    <div class="Louti" style="background: #FF7F00;height: 200px;">美妆</div>
		    <div class="Louti" style="background: #FFFF00;height: 220px;">手机</div>
		    <div class="Louti" style="background: #00FF00;height: 300px;">家电</div>
		    <div class="Louti" style="background: #00FFFF;height: 20px;">数码</div>
		    <div class="Louti" style="background: #0000FF;height: 80px;">运动</div>
		    <div class="Louti" style="background: #8B00FF;height: 90px;">居家</div>
		    <div class="Louti" style="background: aquamarine; height: 100px;">母婴</div>
		    <div class="Louti" style="background: pink;">食品</div>
		    <div class="Louti" style="background: bisque;height: 800px;">图书</div>
		    <div class="Louti" style="background: lightgoldenrodyellow;height: 500px;">服务</div>
		</div>
		<div id="footer">尾部</div>
		<!--楼层内容结束-->
		<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
		<script>
			var flag = true; //控制 当点击楼层号时，禁止滚动条的代码执行   值为true时，可以执行滚动条代码
			//  根据楼层号 控制滚走的距离  
			// 1、除了top的楼梯号，为每一个楼梯号添加一个click，控制楼梯滚走的距离（距离：当前楼层的offset().top ）
			$("#menu li:not(.last)").click(function() {
			    flag = false;
			    //当前点击的楼号红色的 其余黑色的
			    $(this).find("span")
			        .addClass("active")
			        .end()
			        .siblings()
			        .find("span")
			        .removeClass("active");
			    //获取当前楼号对应楼层的 top值
			    var sTop = $(".Louti").eq($(this).index()).offset().top;
			
			    //将页面滚走的距离设置为  sTop  
			    $("body,html").animate({
			        "scrollTop": sTop
			    }, 1000, function() {
			        flag = true;
			    });
			})
			//2、点击top   回到顶部
			$("#menu li.last").click(function() {
			    $("body,html").animate({
			        "scrollTop": 0
			    }, 1000);
			    $("#menu li span").removeClass("active");
			})
			
			
			//3、 滚动条滚动 --  找到当前楼层的索引    控制楼层号
			var h = $("#menu").offset().top;
			console.log(h)
			$(window).scroll(function() {
			    //如果flag  为true   可以执行滚动条的代码
			    if (flag) {
			
			        //获取页面滚走的距离
			        var sTop = $(document).scrollTop();
			        //filter  返回满足条件的那个对象 
			        //找到满足某个条件的楼层对象    
			        var $floor = $(".Louti").filter(function(index, ele) {
			            return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;
			        })
					
					if ($(document).scrollTop()>=h) {
						$("#menu").addClass('on');
						
					}else{
						$("#menu").removeClass('on');
					}
			        //根据楼层的索引 设置楼梯号的 样式
			        $("#menu li").eq($floor.index())
			            .find("span")
			            .addClass("active")
			            .end()
			            .siblings()
			            .find("span")
			            .removeClass("active");
			    }
			})
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			//		方法二：
			
			//		$(document).scroll(function() {
			//			if($(document).scrollTop() >= 500) {
			//				$("#menu").fadeIn(500);
			//				var i = Math.floor(($(document).scrollTop() - 500) / 700);
			//				$("ul li").eq(i).children("span").addClass("active");
			//				$("ul li").eq(i).siblings().children("span").removeClass("active")
			//			}else{
			//				$("#menu").fadeOut(333);
			//			}
			//		})
			//		
			//		
			//		$("ul li").not(".last").click(function() {
			//			$("body,html").animate({ "scrollTop": $(this).index() * 700 + 500 }, 666)
			//		})
			//		
			//		$(".last").click(function(){
			//			$("body").animate({ "scrollTop":0 },500);
			//		})
		</script>
	</body>
</html>
